<template>
	<view class="content">
		<view class="game_item" v-for="(item ,index) in gameList" @click="entrance(item)">
			<!-- <span class="silk-ribbon2">活<br>动<br>中</span> -->
			<view class="">
				分组名：{{item.title.title}}
			</view>
			<view class="">
				队伍数：{{item.title.group_num}}
			</view>
			<view class="time">
				创建时间：{{$u.timeFrom(item.title.time)}}
			</view>
		</view>
		
		<view class="addGame" @click="nav">
			创建分组
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gameList:[]
			}
		},
		onShow() {
				this.$myRuquest('home/group/group_list').then(res=>{
					// res.data.splice(10)
					this.gameList=res.data
				})
		},
		methods: {
			entrance(item){
				uni.navigateTo({
					url:'./teamFast?gameId='+item.title.id
				})
			},
			nav(){
				uni.navigateTo({
					url:'./createTeamFast'
				})
			}
		}
	}
</script>

<style lang="scss">
 .content{
	 background-color: #FAFAFA;
	 padding: 20rpx;
	 padding-bottom:160rpx;
	 min-height:calc(100vh - 160rpx);
	 .game_item{
		 background-color: #ffffff;
		 padding: 20rpx;
		 border-radius: 8upx;
		 margin-bottom: 20upx;
		 // padding-left: 110upx;
		 // display: flex;
		 // justify-content: space-between;
		 position: relative;
		 >view{
			 margin: 10rpx;
		 }
		 .time{
			 font-size: 28upx;
			 color: #999999;
			 text-align: right;
		 }
	 }
	 .addGame{
		 width: calc(100vw - 80upx);
		 height: 80upx;
		 position: fixed;
		 bottom: 20upx;
		 left: 40upx;
		 background-color: #FED194;
		 color: #AC7D3D;
		 line-height: 80upx;
		 text-align: center;
		 border-radius: 80upx;
	 }
 }
 
 .silk-ribbon2 {
 	display: inline-block;
 	width: 60upx;
 	padding: 10upx 0;
 	background: #FED194;
	color: #AC7D3D;
 	top: -6upx;
 	left: 25upx;
 	position: absolute;
 	text-align: center;
 	border-top-left-radius: 3upx;
 }
 
 .silk-ribbon2:before {
 	height: 0;
 	width: 0;
 	border-bottom: 6upx solid #AC7D3D;
 	border-right: 6upx solid transparent;
 	right: -6upx;
 	top: 0;
 }
 
 .silk-ribbon2:before,
 .silk-ribbon2:after {
 	content: "";
 	position: absolute;
 }
 
 .silk-ribbon2:after {
 	height: 0;
 	width: 0;
 	border-left: 30upx solid #FED194;
 	border-right: 30upx solid #FED194;
 	border-bottom: 30upx solid transparent;
 	bottom: -30upx;
 	left: 0;
 }
</style>
